import React, { useState } from "react";
import UButton from "../../components/UButton";
import UTable from "../../components/UTable";
import "./index.less";

const Component = () => {
  const [selectList, setSelectList] = useState([]);
  const [columnList, setColumnList] = useState([
    {
      id: "id",
      title: "id",
      width: 200,
    },
    {
      id: "title",
      title: "title",
    },
  ]);
  const operations = [
    {
      key:'delete',
      name:'删除',
      method:()=>{
        console.log('删除操作')
      }
    }
  ]
  const dataSource = [1, 2, 3, 4, 5, 6].map((item, index) => {
    return {
      id: index,
      title: `row-${item}`,
    };
  });
  const handleConfirm = () => {
    console.log("confirm");
  };
  const handleCancel = () => {
    console.log("cancle");
  };
  const handleDelete = (e) => {
    console.log(selectList);
  };

  const handleAdd = ()=>{

  }

  const handleSelected = (selectedRows) => {
    setSelectList(selectedRows);
  };

  return (
    <div className="componentName">
      <div className="button margin">
        <UButton value="确认" type="default" onClick={() => handleConfirm()} />
        <UButton value="取消" type="cancle" onClick={() => handleCancel()} />
      </div>
      <div className="table margin">
        <UTable
          dataSource={dataSource}
          onDelete={(e) => handleDelete(e)}
          onSelected={(selectedRows) => handleSelected(selectedRows)}
          handleAdd={()=>handleAdd()}
          columnList={columnList}
          operations={operations}
        />
      </div>
    </div>
  );
};

export default Component;
